<template>
  <div class="app-container">
    <CommonContainer title="报单人信息">
      <template v-slot:rightInfo>
        <dict-tag class="creditReviewStatus"
                  :class="[detailInfo.creditReviewStatus==3 ?'active1':'',detailInfo.creditReviewStatus==2||detailInfo.creditReviewStatus==4?'active2':'',detailInfo.creditReviewStatus==5?'active3':'']"
                  :options="dict.type.credit_review_apply_status" :value="detailInfo.creditReviewStatus"/>
      </template>
      <el-descriptions>
        <el-descriptions-item label="报单人">{{ detailInfo.reporter }}</el-descriptions-item>
        <el-descriptions-item label="报单人联系电话">{{ detailInfo.reporterTel }}</el-descriptions-item>
        <el-descriptions-item label="所属组织">{{ detailInfo.organization }}</el-descriptions-item>
        <el-descriptions-item label="城市">{{ detailInfo.city }}</el-descriptions-item>
        <el-descriptions-item label="区域">{{ detailInfo.region }}</el-descriptions-item>
        <el-descriptions-item label="经销商">{{ detailInfo.dealer }}</el-descriptions-item>
      </el-descriptions>
    </CommonContainer>
    <CommonContainer title="客户信息">
      <el-descriptions>
        <el-descriptions-item label="客户名称">{{ detailInfo.customerName }}</el-descriptions-item>
        <el-descriptions-item label="客户编号">{{ detailInfo.customerCode }}</el-descriptions-item>
        <el-descriptions-item label="客户类型">
          <dict-tag
              :options="dict.type.customer_type"
              :value="detailInfo.customerType"/>
        </el-descriptions-item>
        <el-descriptions-item label="客户等级">
          <dict-tag
              :options="dict.type.customer_level"
              :value="detailInfo.customerLevel"/>
        </el-descriptions-item>
        <el-descriptions-item label="客户属性">
          <dict-tag
              :options="dict.type.customer_property"
              :value="detailInfo.clientProperty"/>
        </el-descriptions-item>
        <el-descriptions-item label="客户标签">
          <dict-tag
              :options="dict.type.customer_label"
              :value="detailInfo.customerSource"/>
        </el-descriptions-item>
      </el-descriptions>
    </CommonContainer>
    <CommonContainer title="订单信息">
      <el-descriptions>
        <el-descriptions-item label="额度申请">
          <span style="color: #1890ff" @click="goQurtaApplyDetail">{{ detailInfo.orderNo }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="业务类型">
          <dict-tag
              :options="dict.type.business_type"
              :value="detailInfo.businessType"/>
        </el-descriptions-item>
        <el-descriptions-item label="产品方案">{{ detailInfo.planName }}</el-descriptions-item>
        <el-descriptions-item label="线索来源">
          <dict-tag
              :options="dict.type.clues_source"
              :value="detailInfo.clueClassification"/>
        </el-descriptions-item>
        <el-descriptions-item label="租赁用途">
          <dict-tag
              :options="dict.type.rental_purpose"
              :value="detailInfo.leasePurpose"/>
        </el-descriptions-item>
        <!--                <el-descriptions-item label="租金支付方式">-->
        <!--                    <dict-tag-->
        <!--                        :options="dict.type.finance_payment_method"-->
        <!--                        :value="detailInfo.rentPaymentMethod"/>-->
        <!--                </el-descriptions-item>-->
        <el-descriptions-item label="申请总台数">{{ detailInfo.applicationTotal }}</el-descriptions-item>
      </el-descriptions>
    </CommonContainer>
    <CommonContainer title="信审结果" v-if="detailInfo.creditReviewStatus>=4&&detailInfo.creditReviewStatus<=6">
      <template v-slot:rightInfo>
        <el-button type="primary" @click="handleCreditDetail(detailInfo.creditReviewStatus)">{{ detailInfo.creditReviewStatus == 6 ? '免' : '' }}信审详情</el-button>
      </template>
      <div>
        <el-descriptions>
          <template v-if="detailInfo.creditReviewStatus==6">
            <el-descriptions-item label="价审通过时间">{{ results.auditTime|filterNull }}</el-descriptions-item>
          </template>
          <template v-else>
            <el-descriptions-item label="信审批复建议">{{ results.creditReviewResult|creditSuggestionApproval }}</el-descriptions-item>
            <el-descriptions-item label="审核人">{{ results.auditPerson|filterNull }}</el-descriptions-item>
            <el-descriptions-item label="审核时间">{{ results.auditTime|filterNull }}</el-descriptions-item>
          </template>

        </el-descriptions>

        <el-form label-width="120px">
          <div style="margin-bottom: 20px">
            <div class="flex-row-center">
              <span class="quota">信审额度:</span>
              <template v-if="results.displayType==1||results.displayType==2">
                <span class="date">{{ results.creditReviewLimit || '--' }}</span>
                <el-button v-if="results.displayType==1" type="text" @click="voidRemainingBalance">作废剩余额度</el-button>
              </template>
              <template v-else>
                <span class="date">{{ results.creditReviewLimit || '--' }}</span>
                <template v-if="results.displayType==3">
                  <span style="font-size: 14px;color: #8C8C8C">操作人:</span>
                  <span class="date">{{ cancleOrderInfo.invalidOperator|filterNull }}</span>
                  <el-button type="text" @click="goVoidRemainingBalanceInfo">查看作废说明</el-button>
                </template>
              </template>
            </div>

            <div class="table-title-wrap flex-row-center" style="margin-top: 10px">
              <p class="statisticInfo">申请总台数: <span>{{ results.totalApplicationNumber }}</span></p>
              <p class="statisticInfo">通过总台数: <span>{{ results.totalPassNumber }}</span></p>
              <p class="statisticInfo">拒绝总台数: <span>{{ results.totalRejectNumber }}</span></p>
            </div>

            <el-table
                :data="results.cars"
                :header-cell-style="{ background: '#FAFAFA', color: '#000000' }" border>
              <el-table-column
                  align="center"
                  prop="vehicleManufacturers"
                  label="车辆厂商"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="vehicleModel"
                  label="车辆车型"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="vehicleStyle"
                  label="车辆款型"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="carNo"
                  label="车牌号"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="vehicleEnergyType"
                  label="车辆能源类型"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="registrationNature"
                  label="登记性质"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="applicationType"
                  label="申请类型"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="leaseTerm"
                  label="租赁期限(月)"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="rentPaymentMethod"
                  label="租金支付方式"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="mileageLimit"
                  label="里程限制（公里)"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="registeredCity"
                  label="上牌城市"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="registrationFee"
                  label="上牌费"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="insurancePremium"
                  label="保险费"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="maintenancePremium"
                  label="维保费"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="purchaseTax"
                  label="购置税"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="vehicleAndVesselTax"
                  label="车船税"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="installationCost"
                  label="加装费用"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="otherExpenses"
                  label="其他费用"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="irr"
                  label="IRR（含牌照）"
                  min-width="120">
                <template v-slot="{row}">
                  <template v-if="row.irr">{{row.irr}}%</template>
                  <template v-else>--</template>
                </template>
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="margin"
                  label="保证金"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="monthlyRent"
                  label="月租金"
                  min-width="120">
              </el-table-column>
              <el-table-column label="首期租金、比例" align="center" prop="firstInstallmentRent" min-width="150px" show-overflow-tooltip>
                <template v-slot="{row}">
                  <template v-if="row.firstInstallmentRentalRatio">
                    {{ row.firstInstallmentRent }} 、{{ row.firstInstallmentRentalRatio }}%
                  </template>
                  <template v-else>
                    -- 、--
                  </template>

                </template>
              </el-table-column>
              <el-table-column label="残值、比例" align="center" prop="totalApplicationNumber" min-width="120px" show-overflow-tooltip>
                <template v-slot="{row}">
                  <template v-if="row.residualValueRatio">
                    {{ row.residualValue }} 、 {{ row.residualValueRatio }}%
                  </template>
                  <template v-else>
                    -- 、--
                  </template>

                </template>
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="suggestedPrice"
                  label="厂商指导价"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="purchasePrice"
                  label="新车采购单价"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="currentValuation"
                  label="旧车当前估值"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="numberOfApplications"
                  label="申请台数"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="numberOfUnitsPassed"
                  label="通过台数"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="rejectedUnits"
                  label="拒绝台数"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="numberOfUnitsUsed"
                  label="已使用台数"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="numberOfInvalidUnits"
                  label="作废台数"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="numberOfFrozenUnits"
                  label="冻结台数"
                  min-width="120">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="numberOfFrozenUnits"
                  label="剩余可用台数"
                  min-width="120">
                <template v-slot="{row}">
                  <span>{{ row.numberOfUnitsPassed - row.numberOfUnitsUsed - row.numberOfInvalidUnits - row.numberOfFrozenUnits }}</span>
                </template>
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="effectiveStatus"
                  label="通过台数状态"
                  min-width="120">
                <template v-slot="{row}">
                  <span>{{ row.effectiveStatus == 1 ? '生效中' : '已过期' }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <template v-if="detailInfo.creditReviewStatus==4||detailInfo.creditReviewStatus==5">
            <el-form-item label="说明:" prop="remark">
              {{ results.remark|filterNull }}
            </el-form-item>
            <el-form-item label="附件:" class="form-img" style="margin-top: 40px">
              <image-common disabled v-model="results.annex" :up-type="2"></image-common>
            </el-form-item>
          </template>
        </el-form>
        <void-remaining-balance ref="voidRemainingBalance" @success="getDetailInfo"></void-remaining-balance>
        <void-remaining-balance-info :cancle-order-info="detailInfo.cancellationInstructions" ref="voidRemainingBalanceInfo"></void-remaining-balance-info>
      </div>
    </CommonContainer>

    <CommonContainer title="信审记录" v-if="detailInfo.creditReviewRecords && detailInfo.creditReviewRecords.length>0">
      <el-table :data="detailInfo.creditReviewRecords" border>
        <template slot="empty">
          <el-empty :image-size="50" description="暂无信审记录"></el-empty>
        </template>
        <el-table-column
            align="center"
            prop="submitter"
            label="提交人"
            min-width="120">
        </el-table-column>
        <el-table-column
            align="center"
            prop="submitTime"
            label="提交时间"
            min-width="120">
        </el-table-column>
        <el-table-column
            align="center"
            prop="creditReviewStatus"
            label="状态"
            min-width="120">
          <template v-slot="{row}">
            <dict-tag :options="dict.type.credit_review_status" :value="row.creditReviewStatus"/>
            <el-tag v-if="row.supplemented==1" type="warning">待补充资料</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            prop="remark"
            label="不予准入说明"
            min-width="120">
        </el-table-column>
        <el-table-column
            align="center"
            prop="auditPerson"
            label="审核人"
            min-width="120">
        </el-table-column>
        <el-table-column
            align="center"
            prop="auditTime"
            label="审核时间"
            min-width="120">
        </el-table-column>

        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200" fixed="right">
          <template v-slot="{ row }">
            <el-button size="small" type="text"
                       @click="goDetail(row)">查看信审资料
            </el-button>
            <el-button v-if="row.supplemented==1" size="small" type="text"
                       @click="goAdditionalFiles(row)">补充资料
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </CommonContainer>
    <div class="card-wrap flex justify-end card-padding">
      <el-button @click="back">返回</el-button>
    </div>
    <replenish-files ref="replenishFiles" @success="getDetailInfo"></replenish-files>
  </div>
</template>

<script>

import ReplenishFiles from "@/views/letterReview/order/components/ReplenishFiles.vue";
import VoidRemainingBalanceInfo from "@/views/letterReview/letterReview/components/VoidRemainingBalanceInfo.vue";
import VoidRemainingBalance from "@/views/letterReview/letterReview/components/VoidRemainingBalance.vue";
import * as creditApplyApi from "@/api/letterReview/creditReviewApply"

export default {
  components: {VoidRemainingBalance, VoidRemainingBalanceInfo, ReplenishFiles},
  dicts: [
    'customer_type',
    'customer_level',
    'customer_property',
    'customer_label',
    'business_type',
    'rental_purpose',
    'finance_payment_method',
    'credit_review_apply_status',
    'credit_review_status',
    'clues_source'
  ],
  props: {},
  data() {
    return {
      detailInfo: {},
      results: null,
      cancleOrderInfo: null,
    }
  },
  computed: {},
  methods: {
    //获取信审申请详情
    getDetailInfo() {
      creditApplyApi.creditReviewApplyDetails(this.$route.query.id).then(res => {
        this.detailInfo = res.data;
        this.results = this.detailInfo.results;
        this.cancleOrderInfo = this.detailInfo.cancellationInstructions;
      })
    },

    // 信审详情
    handleCreditDetail(creditReviewStatus) {
      if (creditReviewStatus == 6) {//免信审详情
        this._toPage({
          name: 'LetterReviewDetail',
          query: {
            applicationNo: this.results.applicationNo
          }
        })
      } else {//信审批复建议详情
        this._toPage({
          name: 'OrderReplySuggestionDetail',
          query: {
            applicationNo: this.detailInfo.applicationNo
          }
        })
      }

    },
    //作废剩余额度
    voidRemainingBalance() {
      this.$refs.voidRemainingBalance.show(this.detailInfo.results.applicationNo)
    },
    //查看作废信息
    goVoidRemainingBalanceInfo() {
      this.$refs.voidRemainingBalanceInfo.show()
    },
    // 查看信审资料
    goDetail(row) {
      this._toPage({
        name: 'OrderCreditFilesDetail',
        query: {
          applicationNo: row.applicationNo
        }
      })
    },
    // 补充资料
    goAdditionalFiles(row) {
      this.$refs.replenishFiles.show(row.applicationNo)
    },
    //查看额度申请详情
    goQurtaApplyDetail() {
      if (this.checkPermi(['quota:apply:list:look'])) {
        this._toPage({
          name: 'ApplyDetails',
          query: {
            calcSchemeId: this.detailInfo.calcSchemeId
          }
        })
      } else {
        this.$message.warning('无权限')
      }
    },
    //返回
    back() {
      this.$router.back()
      this.$store.dispatch('tagsView/delView', this.$route)
    }
  },
  created() {
    this.getDetailInfo()
  },

}
</script>

<style lang="scss" scoped>


.creditReviewStatus {
  color: #1884FF;
  font-size: 16px;
  font-weight: bold;

  &.active1 {
    color: orange;
  }

  &.active2 {
    color: red;
  }

  &.active3 {
    color: green;
  }
}

.statisticInfo {
  color: #464646;
  font-size: 14px;
  margin-right: 10px;

  span {
    color: #1884FF;
  }
}

.quota {
  font-size: 14px;
  color: #8C8C8C;
  position: relative;
  left: 12px;
}

.date {
  font-size: 14px;
  margin: 0 20px;
}
</style>
